<template>
  <a-typography>
  <a-typography-title level="3">上传实验数据集</a-typography-title>
</a-typography>
  <a-form style="margin-top: 30px">
    <a-form-item
        label="实验数据集名称"
        name="experimentName"
        class="inputStyle">
      <a-input v-model:value="experimentSetForm.experimentSetName" />
    </a-form-item>
    <a-form-item
        label="实验描述"
        name="experimentDescription"
        class="inputStyle">
      <a-textarea  v-model:value="experimentSetForm.experimentDescription" rows="4"></a-textarea>
    </a-form-item>
    <a-form-item
        label="实验作者"
        name="creator"
        class="inputStyle">
      <a-input v-model:value="experimentSetForm.creator" />
    </a-form-item>
    <a-form-item
        label="实验领域"
        name="field"
        class="inputStyle">
      <a-input v-model:value="experimentSetForm.field" />
    </a-form-item>

    <a-space direction="horizontal" size="large">
      <a-button type="primary" @click="handleUpload" :loading="loading">确定</a-button>
      <a-button type="primary" danger @click="handleCancel">取消</a-button>
    </a-space>
  </a-form>
</template>
<script>
import axiosInstance from "@/axios/axios.js";
import {message} from "ant-design-vue";

export default {
  name: "UploadExperimentSet",
  data(){
    return{
      loading: false,
      experimentSetForm:{
        experimentSetName:"",
        experimentDescription:"",
        creator:"",
        field:"",
      }
    }
  },
  methods:{
    async handleUpload(){
      if (!this.experimentSetForm.experimentSetName) {
        message.error('请输入实验数据集名称');
        return;
      }

      this.loading = true;
      try {
        const response = await axiosInstance({
          method: "POST",
          url: "/upload/experimentSet",
          headers: {
            Authorization: `Bearer ${this.$cookies.get("jwt")}`
          },
          data: {
            username: this.$cookies.get("username"),
            description: this.experimentSetForm.experimentDescription,
            experimentSetName: this.experimentSetForm.experimentSetName,
            creator: this.experimentSetForm.creator,
            field: this.experimentSetForm.field,
          },
        });

        if (response.data.code === 200) {
          message.success('创建实验数据集成功');
          this.$router.go(-1);
        } else if (response.data.code === 400) {
          message.error('实验数据集名称重复！');
        } else {
          message.error(response.data.message || '创建实验数据集失败');
        }
      } catch (err) {
        console.error('创建实验数据集失败:', err);
        message.error(err.response?.data?.message || '创建实验数据集失败');
      } finally {
        this.loading = false;
      }
    },
    handleCancel(){
      this.$router.go(-1);
    }
  }
}
</script>
<style scoped>
.inputStyle{
  padding: 0 32vw 0 32vw;
}
</style>